<template>
	<view class="container">
		<!-- 头部 -->
		<uni-nav-bar backgroundColor="rgb(255 22 69,0)"  :statusBar="true" :border="false">
			<view class="header">
				搜索
			</view>
			<block v-slot:left style="width: 100px;">
				<view class="">
					<uni-icons @click="$goURl('/pages/index/index')" class="rr-icons" color="#FFF" type="back" size="25"></uni-icons>
					<text style="font-size: 20px;color: #fff;font-weight: bold;">爆品专区</text>
					<!-- <image src="http://pubuimg.cqguanjie.cn/icon/16995206219682.png" mode=""></image> -->
				</view>
			</block>
		</uni-nav-bar>
		<view class="search" v-if="data.popularList.length>0">
			<text class="searchText" >最近搜索:</text>
			<view class="searMiss">
				<view class="prpular" v-for="(news,indexs) in data.popularList" :key="indexs" @click="prpular(news)">
					<text class="prpularText">{{news}}</text>
				</view>
			</view>
		</view>
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data.classlist" :current="data.currents" mode="round" :dotsStyles="{
			selectedBackgroundColor:'#FA301B',selectedBorder:'#fff',border:'#fff'
		}" :bottom='-30' field="right">
			<swiper class="list"  @change="changes" circular="true"  interval="3000" duration="1000">
				<swiper-item class="box" v-for="(items,index) in data.classlist" :key="index">
					<view class="item"  v-for="(item,indexs) in items" :key="indexs" @click="item.ID==0?$goURl(item.url):$goURl('/pages/commodity/firstlist?id='+item.ID+'&name='+item.name+'&img='+item.img_list)">
						<image :src="item.img" mode=""></image>
						{{item.name}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<view class="goodslist">
			<view class="goodstitle">
				猜你喜欢
			</view>
			<waterfall :list="data.list"></waterfall>
		</view>

		<empty v-if="data.list.length==0"></empty>
	</view>
</template>

<script setup>
	
	import waterfall from '@/components/lj-waterfall/goods.vue'
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const { proxy } = getCurrentInstance();
	const data = reactive({
		list:[],
		page:0,
		pages:1,
		size:10,
		total:0,
		classlist:[],
		classpage:0,
		popularList:[],
		currents:0
	})
	onLoad((option)=>{
		
		
	})
	onShow(()=>{
		data.list=[]
		init()
	})
	onPullDownRefresh(()=> {
		data.list=[]
		init()
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		getGoods()
	})

	function init(){
		data.popularList=uni.getStorageSync('popularLists')?uni.getStorageSync('popularLists'):[],
		data.page=0
		data.pages=1
		secondary()
		getGoods()
	}
	function changes(e){
		data.currents=e.detail.current
	}
	function getGoods(){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url:`api/goods_list_all/${0}/?page=${data.page}&size=${data.size}&is_index=1`,
				method:'GET',
				success:(res)=>{
					data.total=res.data.total
					data.pages = Math.ceil(res.data.total / data.size)
					res.data.data.forEach(item=>{
						data.list.push(item)
					})
				}
			})
		}
	}
	// 商品分类
	function secondary(){
		proxy.$request({
			url:`api/typeList/`,
			method:'GET',
			success:(res)=>{
				if(res.errno==0){
					// data.classlist = 
					// let num = Math.ceil(res.data.class_first.length / data.size)
					// let list=[]
					// for (let i=0;i<num;i++) {
					// 	list.push([])
						
					// }
					// res.data.class_first.forEach((item,index)=>{
					// 	if(index)
					// })
					
					
					data.classlist = splitArray([...res.data.class_first,{
						name:'健康管理',
						ID:0,
						url:'/pages/news/health/health',
						img:'http://pubuimg.cqguanjie.cn/icon/16995206476920.png'
					},
					{
						name:'健康资讯',
						ID:0,
						url:'/pages/news/health/list',
						img:'http://pubuimg.cqguanjie.cn/icon/16995206712591.png'
					}])
				}
			}
		})
	}
	function splitArray(arr) {//12
		const result = [];
		const len = arr.length;
		for (let i = 0; i < len; i += 10) {
			const row = [];
			for (let j = 0; j < 10; j++) {
				if (i + j < len) {
					row.push(arr[i + j]);
				}
			}
			result.push(row);
		}
		return result;
	}
	// 搜索
	function prpular(news){
		data.popularList.unshift(news)
		data.popularList=data.popularList.splice(0,6)
		data.popularList=Array.from(new Set(data.popularList))
		uni.setStorageSync('popularLists',data.popularList)
		proxy.$goURl('/pages/commodity/list?keyword='+news)
	}
</script>

<style lang="scss">
	.container{
		background-image: url('http://pubuimg.cqguanjie.cn/icon/16995206893247.png');
		background-size: 100% 200px;
		background-repeat: no-repeat;
		.list{
			background-color: #fff;
			margin: 20upx;
			padding: 20upx;
			border-radius: 30upx;
			box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.10);
			.box{
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 13px;
					image{
						width: 30px;
						height: 30px;
					}
				}
			}
		}
		.goodslist{
			padding: 20upx;
			.goodstitle{
				font-size: 16px;
				color: #000;
				font-weight: bold;
			}
		}
		.search{
			width: 94%;
			margin: 0 auto;
			.searchText{
				font-size: 12px;
				color: #fff;
			}
			.searMiss{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 20rpx;
			}
			.prpular{
				background: rgba(255, 255, 255, 0.5);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8rpx 24rpx;
				margin: 0 20rpx 20rpx 0;
			}
			.prpularText{
				
					font-size: 12px;
					color: #fff;
			}
		}
	}
	.header{
		margin: auto;
		background-color: #fff;
		width: 100%;
		height: 30px;
		border-radius: 30upx;
		font-size: 14px;
		color: #999;
		display: flex;
		align-items: center;
		padding-left: 20px;
	}
	
	::v-deep .uni-navbar__header-btns-left{
		width: 140px !important;
		view{
			display: flex;
			align-items: center;
			image{
				width: 100px;
				height: 21px;
			}
		}
	}
	::v-deep .uni-navbar__header-btns-right{
		width: 0 !important;

	}
	::v-deep .uni-swiper__dots-box{
		bottom: 20px !important;
	}
	::v-deep .uni-swiper__dots-item{
		// margin: 0 !important;
	}
</style>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
